<template>
  <span class="pointer primary-hover-color" @click="voteLike">
    <i v-if="loading" class="el-icon-loading f-mini-plus"></i>
    <svg-icon v-else :icon-name="curState ? 'like-fill' : 'like'" />
    {{ comment.voteCounts.like }}
  </span>
</template>

<script>
import { formatComment } from '@/components/issues-answers/format';

export default {
  name: 'vote-like',
  props: {
    comment: Object,
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    curState() { return this.comment.voteStates.like; },
  },
  methods: {
    voteLike() {
      this.loading = true;
      this.$api.other.vote({
        votePosition: 'Comment', // 对评论点赞
        votePositionId: this.comment.id,
        voteAction: 'like',
        voteState: !this.curState,
      }).then((res) => {
        this.$emit('voted', formatComment(res.data));
        this.$root.$emit('checkScore', this.$va.initScoreType('like', this.curState));
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style></style>
